<template>
  <div class="forget-pwd">
    <div class="forget-head">{{type == 3 ? '修改密码' : '忘记密码'}}</div>
    <div class="input-wrap"><input type="text" class="input-item" placeholder="请输入手机号" v-model="phone"></div>
    <div class="input-wrap"><input type="text" class="input-item v-code" placeholder="请输入验证码" v-model="vCode"><span class="send-v-code" :class="{active: isSend}" @click="sendOutCode">{{isSend?countDown+'s':'获取验证码'}}</span></div>
    <div class="input-wrap"><input type="password" class="input-item" placeholder="请设置6-22位不含特殊字符的密码" v-model="pwd"></div>
    <div class="input-wrap"><input type="password" class="input-item" placeholder="确认密码" v-model="pwdSure"></div>
    <button class="wx-btn" :class="{active: isSure}" @click="sure">确定</button>
  </div>
</template>

<script>
  import axios from 'axios'
  import tools from 'COMMON/tools.js'
  import Vue from 'vue'
  import { ToastPlugin} from 'vux'
  Vue.use(ToastPlugin)

  export default {
    name: 'forget-pwd',
    data: function() {
      return {
        phone: "",
        vCode: "", // 验证码
        pwd: "",
        pwdSure: "",
        countDown: 60,
        isSend: false,
        type: -1
      }
    },
    components: {
    },
    mounted() {
      this.type = tools.getArg('type', String(location.href).replace(/[#]*$/g, ""));
    },
    computed: { 
      isSure() {
        return this.phone != "" && this.vCode != "" && this.pwd != ""
      },
    },
    methods: {
      sure() {
        if(!this.isSure) {
          return false;
        }
        if (this.pwd !== this.pwdSure) {
          this.$vux.toast.text('两次输入的密码不相同', 'middle');
        }
        let _url;
        if (this.type == 3) {
          _url = '/user/modifyPassword'
        } 
        if (this.type == 4) {
          _url = '/login/findPassword'
        }
        let that = this;
        axios.post(_url,{
          phone: that.phone,
          password: that.pwd,
          verify_code: that.vCode
        }).then((res) => {
          if(res.msg == 'success') {
            tools.setCookie('user_id', that.phone);
            tools.setCookie('user_pwd', that.pwd);
            location.href = "/login.html"
          } else {
            that.$vux.toast.text(res.msg, 'middle');
          }
        })
        
      },
      sendOutCode() {
        if(this.isSend) {
          return;
        }
        let that = this;
        tools.checkPhoneFormat(this.phone)
          .then(() => {
            if (window.DEBUGGING) {
              this.isSend = true;
              let time = setInterval(()=>{
                if(this.countDown == 0) {
                  clearInterval(time);
                  this.isSend = false;
                  this.countDown = 60;
                  return;
                }
                this.countDown--;
              },1000)
            }

            axios.post('/Utility/sendVerifyCode',{
              phone: that.phone,
              type: that.type
            }).then((res) => {
              that.isSend = true;
              let time = setInterval(()=>{
                if(that.countDown == 0) {
                  clearInterval(time);
                  that.isSend = false;
                  that.countDown = 60;
                  return;
                }
                that.countDown--;
              },1000)
            })
          })
        .catch((err) => {
          that.$vux.toast.text(err, 'middle');
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

body {background-color: #fff;}
  .forget-pwd {
    padding: 0 20px;
    padding-top: 70px;
    .forget-head {
      font-size: 20px;
      font-weight: bold;
      color: #4A4A4A;
    }
    .input-wrap {
      // .Placeholder-color(#ccc);
      position: relative;
      margin-top: 30px;
      .input-item {
        box-sizing: border-box;
        font-size: 16px;
        border: none;
        outline: none;
        width: 100%;
        padding-left: 10px;
        line-height: 44px;
        border-bottom: 1px solid #EEEEEE;
      }
      .v-code {
        padding-right: 100px;
      }
      .send-v-code {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 16px;
        line-height: 48px;
        color: #9b9b9b;
        &.active {
          color: #039D4C;
        }
      }
    }
    .tip {
      margin-top: 20px;
      font-size: 12px;
      >a {
        color: #4f93e3;
      }
    }
  }

  .second-steps {
    padding: 0 20px;
    color: #333;
    .second-head {
      font-weight: bold;
      font-size: 20px;
      margin-top: 4rem;
      margin-bottom: 50px;
    }
    .identity-wrap {
      display: flex;
      .identity-item {
        flex: 1;
        margin-right: 10px;
        padding: 0.55rem 0.75rem 0.8rem 0.65rem;
        text-align: right;
        border-radius: 4px;
        background-color: #f4f6f8;
        .identity-text {
          text-align: left;
          margin-bottom: 2.75rem;
        }
        &:nth-last-of-type(1) {
          margin-right: 0px;
        }
      }
    }
    .complete {
      margin-top: 17.5rem;
    }
  }
</style>